import React from "react"
import "./home.css"
import {Icon} from "antd-mobile"
import {getCity} from "../../api/index"
class Home extends React.Component{
      constructor(){
          super()
          this.state={
              hotArr:[],
              allArr:{},
              nowArr:{}
              
          }
      }
      componentDidMount(){
        getCity("hot").then(
            res=>{
                this.setState({
                    hotArr:[...res.data]
                })
            }
        )
        getCity("group").then(
            res=>{
               
                this.setState({
                    allArr:{...res.data}
                })
            }
        )
        getCity("guess").then(
            res=>{
              
               this.setState({
                nowArr:{...res.data}
            })
            }
        )
      }
      toSearchAddress(cityId){
         this.props.history.push(`city/${cityId}`)
      }
      render(){
          
          let {hotArr,allArr,nowArr} = this.state
         return(
            <div className="home">
                 <div className="home-header">
                     <span className="logo">ble.me</span>
                     <div><span>登陆</span>|<span>注册</span></div>
                 </div>
                 <div className="home-nowCity">
                     <div className="nowCity-nav">
                            <div className="nowCity-nav-header">
                                <span>当前定位城市：</span>
                                <span>定位不准时，请在城市列表中选择</span>
                            </div>
                            <div className="nowCity-main" onClick={this.toSearchAddress.bind(this,nowArr.id)}>
                                    <span className="city_address">{nowArr.name}</span>
                                    <Icon type="right" className="nowCity-main-rightIcon" />
                            </div>
                     </div>
                </div>
                <div className="home-hotCity">
                    <div className="home-hotCity-title">
                        <h2>热门城市</h2>
                    </div>
                    <ul className="city-item-wrap">
                        {hotArr.map(item=>{
                            return (<li key={item.area_code} className="city-item" onClick={this.toSearchAddress.bind(this,item.id)}>{item.name}</li>)
                        })}
                        

                    </ul>
                </div>
                {Object.keys(allArr).sort().map(key=>{
                     return(
                        <div key={key} className="home-allCity">
                        <div className="home-allCity-title">
                            <h2>{key}</h2>
                        </div>
                        <ul className="Allcity-item-wrap">
                           {allArr[key].map(item=>{
                               return(
                                  <li key={item.area_code} className="Allcity-item" onClick={this.toSearchAddress.bind(this,item.id)}>{item.name}</li>
                               )
                           })}
    
                        </ul>
                    </div>
                     )
                })}
               
            </div>
           
         )
      }
}
export default Home